<template>
  <ComForm
    ref="formRef"
    :format="format"
    @submit="submit"
    @reset="reset"
    class="form"
  ></ComForm>
  <ComTable
    ref="tableRef"
    :column="column"
    :api="listPost"
    :where="where"
    @del="del"
    @edit="edit"
  ></ComTable>
</template>
      <script lang="ts" setup>
import { ref } from "vue";
import { listPost } from "@/api/system/post";

//表格相关配置
const tableRef = ref();
let column = ref([
  { label: "管网名称", prop: "postId" },
  { label: "部件编号", prop: "postCode" },
  { label: "流域", prop: "postName" },
  { label: "所属街道", prop: "postSort" },
  { label: "所属流域", prop: "postSort" },
  { label: "巡查时间", prop: "postSort" },
  { label: "运维类型", prop: "postSort" },
  { label: "缺陷名称", prop: "postSort" },
  { label: "紧急程度", prop: "postSort" },
  { label: "备注", prop: "postSort" },
]);
const where = ref({});
const edit = (e) => {
  console.log("编辑", e);
};
const del = (e) => {
  console.log("删除", e);
};
const getSelectionRows = () => {
  console.log(tableRef.value.getSelectable());
};
// 表单相关配置
const format = ref([
  {
    label: "时间",
    prop: "postCode",
    type: "date-range",
    defaultValue: "",
    span: 5,
  },
  {
    label: "类型",
    prop: "type",
    type: "select",
    option: [
      { label: "日常维护", value: 0 },
      { label: 1, value: 1 },
    ],
    span: 5,
  },
  {
    label: "",
    prop: "",
    type: "button",
    btns: [
      { label: "查询", event: "submit", type: "success" },
      { label: "重置", event: "reset" },
      { label: "导出", event: "reset" },
    ],
    span: 8,
  },
]);
const formRef = ref(null);
const submit = (data: any) => {
  formRef.value.checkForm().then((result) => {
    if (result) {
      //内部执行提交逻辑
    }
  });
};
const reset = (data: any) => {
  console.log(data);
  formRef.value.reset();
};
</script>
<style scoped>
.form {
  padding: 20px 20px;
}
</style>